﻿<template>
  <div class="purchase-report-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">馃殮 采购报表分析</span>
          <div class="header-actions">
            <el-date-picker v-model="dateRange" type="daterange" size="small" />
            <el-button type="primary" @click="handleRefresh">刷新</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20" class="kpi-row">
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #667eea;">
            <div class="kpi-label">采购总额</div>
            <div class="kpi-value">楼{{ totalPurchase.toLocaleString() }}</div>
            <div class="kpi-trend">环比 +{{ purchaseGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #f5576c;">
            <div class="kpi-label">采购订单</div>
            <div class="kpi-value">{{ totalOrders }}</div>
            <div class="kpi-trend">环比 +{{ ordersGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #4facfe;">
            <div class="kpi-label">供应商数</div>
            <div class="kpi-value">{{ supplierCount }}</div>
            <div class="kpi-trend">新增 {{ newSuppliers }} 家</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #43e97b;">
            <div class="kpi-label">平均账期</div>
            <div class="kpi-value">{{ avgPaymentDays }}天</div>
            <div class="kpi-trend">较上月-5天</div>
          </div>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃搳 采购趋势分析</span>
        </template>
        <div class="chart-container" ref="trendChart"></div>
      </el-card>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃弳 供应商采购排行 TOP 10</span>
            </template>
            <div class="chart-container" ref="supplierRankChart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃摝 品类采购占比</span>
            </template>
            <div class="chart-container" ref="categoryChart"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃搵 采购明细数据</span>
        </template>
        <el-table :data="purchaseData" border stripe>
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="orderNo" label="采购单号" width="150" />
          <el-table-column prop="supplier" label="供应商" width="150" />
          <el-table-column prop="amount" label="采购金额" width="150">
            <template #default="{ row }">
              楼{{ row.amount.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="paymentMethod" label="付款方式" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTag(row.status)">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="备注" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const dateRange = ref([])
const totalPurchase = ref(1890456)
const purchaseGrowth = ref(12.3)
const totalOrders = ref(234)
const ordersGrowth = ref(8.5)
const supplierCount = ref(45)
const newSuppliers = ref(3)
const avgPaymentDays = ref(45)

const purchaseData = ref([
  { date: '2024-01-20', orderNo: 'PO20240120001', supplier: '供应商A', amount: 125000, paymentMethod: '月结', status: '已完成', notes: '' },
  { date: '2024-01-19', orderNo: 'PO20240119001', supplier: '供应商B', amount: 89000, paymentMethod: '现结', status: '已完成', notes: '' }
])

const trendChart = ref(null)
const supplierRankChart = ref(null)
const categoryChart = ref(null)

onMounted(() => {
  initTrendChart()
  initSupplierRankChart()
  initCategoryChart()
})

const initTrendChart = () => {
  const chart = echarts.init(trendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['采购金额', '订单数'] },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
    yAxis: [
      { type: 'value', name: '金额(万元)' },
      { type: 'value', name: '订单数' }
    ],
    series: [
      { name: '采购金额', type: 'bar', data: [189, 198, 212, 195, 218, 229, 245], itemStyle: { color: '#667eea' } },
      { name: '订单数', type: 'line', yAxisIndex: 1, data: [234, 245, 256, 231, 267, 278, 289], itemStyle: { color: '#f5576c' } }
    ]
  })
}

const initSupplierRankChart = () => {
  const chart = echarts.init(supplierRankChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'value' },
    yAxis: {
      type: 'category',
      data: ['供应商10', '供应商9', '供应商8', '供应商7', '供应商6', '供应商5', '供应商4', '供应商3', '供应商2', '供应商1']
    },
    series: [{
      type: 'bar',
      data: [156789, 178900, 189012, 198765, 212345, 234567, 256789, 278901, 298765, 345678],
      itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#667eea' },
        { offset: 1, color: '#764ba2' }
      ])}
    }]
  })
}

const initCategoryChart = () => {
  const chart = echarts.init(categoryChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [{
      name: '品类',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 567890, name: '数码产品' },
        { value: 456789, name: '家用电器' },
        { value: 345678, name: '办公用品' },
        { value: 234567, name: '其他' }
      ]
    }]
  })
}

const getStatusTag = (status) => {
  const map = { '已完成': 'success', '进行中': 'primary', '待审核': 'warning' }
  return map[status] || 'info'
}

const handleRefresh = () => {
  ElMessage.success('数据已刷新')
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.purchase-report-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  padding: 24px;
  background: white;
  border-radius: 8px;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 12px;
}

.kpi-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.kpi-trend {
  font-size: 14px;
  color: #606266;
}

.chart-container {
  height: 400px;
}
</style>
